<template>
	<view>
		<!--顶部视频部分-->
		<view class="smart-page-head"></view>
		<view>
			<video class="checkbox-item" style="width: 100%; height: 400rpx;" src="../../../static/xiangwo.mp4"></video>
		</view>
		<view class="spsy"></view>
		<!--第二部分-标题-->
		<view class="sp">
			<view class="b">大自然的魅力... ...</view>
			<view class="z">
				<view class="z-z">1.0万次播放</view>
				<view class="z-z">
					<image style="width: 30rpx; height: 30rpx;" src="../../../static/zan.png"></image> 3
				</view>
			</view>
			<!--第三部分-用户-->
			<view class="z">
				<view>
					<image style="width: 80rpx; height: 80rpx; border-radius: 50%;" src="../../../static/1.png"></image>
				</view>
				<view class="z-h">
					<view>好吃的好玩的</view>
					<view class="z-z">12-12</view>
				</view>
				<view class="reg-rigth">+关注</view>
			</view>
		</view>
		<!--第四部分-推荐-->
		<view class="item">
			<view>为你推荐</view>
			<!--第四部分-1-->
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx; height: 200rpx;" src="../../../static/chaoda.png"></image>
				</view>
				<view>
					<view class="e-rigth">大兴安岭出现超大型野兽，体重一吨比轿车还大，......</view>
					<view class="z">
						<view class="z-z1">动物大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			<!--第四部分-2-->
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="../../../static/chaoda.png"></image>
				</view>
				<view>
					<view class="e-rigth">大兴安岭出现超大型野兽，体重一吨比轿车还大，......</view>
					<view class="z">
						<view class="z-z1">动物大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			<!--第四部分-3-->
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx; height: 200rpx;" src="../../../static/chaoda.png"></image>
				</view>
				<view>
					<view class="e-rigth">大兴安岭出现超大型野兽，体重一吨比轿车还大，......</view>
					<view class="z">
						<view class="z-z1">动物大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			<!--第四部分-4-->
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="../../../static/chaoda.png"></image>
				</view>
				<view>
					<view class="e-rigth">大兴安岭出现超大型野兽，体重一吨比轿车还大，......</view>
					<view class="z">
						<view class="z-z1">动物大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
		</view>
		<!--第五部分-热门推荐-->
		<view style="color: #c5c5c5; margin-bottom: 30rpx; margin-left: 20rpx;">
			热门评论
		</view>
		<!--第五部分-热门推荐-1-->
		<view class="pl">
			<view>
				<image style="width: 80rpx; height: 80rpx; margin-left: 20rpx; border-radius: 50%; " src="../../../static/5.png"></image>
			</view>
			<view class="lp">
				<view class="pll">
					<view>
						<view class="zt1">狐友879303</view>
						<view class="sj">
							<view class="sjs">1小时前</view>
							<view class="sjs">广西桂林市</view>
						</view>
					</view>
					<view class="pl">
						<view class="plll">3</view>
						<view class="plll">
							<image style="width: 30rpx; height: 30rpx;" src="../../../static/zan.png"></image>
						</view>
						<view class="plll">
							<image style="width: 30rpx; height: 30rpx;" src="../../../static/cai.png"></image>
						</view>
					</view>
				</view>
				<view class="pll">保命要紧，何机再起。</view>
			</view>
		</view>
		<!--第五部分-热门推荐-2-->
		<view class="pl">
			<view>
				<image style="width: 80rpx; height: 80rpx; margin-left: 20rpx; border-radius: 50%;" src="../../../static/4.png"></image>
			</view>
			<view class="lp">
				<view class="pll">
					<view>
						<view class="zt1">网友872503</view>
						<view class="sj">
							<view class="sjs">2小时前</view>
							<view class="sjs">广西贵港市</view>
						</view>
					</view>
					<view class="pl">
						<view class="plll">7</view>
						<view class="plll">
							<image style="width: 30rpx; height: 30rpx;" src="../../../static/zan.png"></image>
						</view>
						<view class="plll">
							<image style="width: 30rpx; height: 30rpx;" src="../../../static/cai.png"></image>
						</view>
					</view>
				</view>
				<view class="pll">微笑生活，勇敢面对。</view>
			</view>
		</view>
	<!--第五部分-热门推荐-3-->
	<view class="pl">
		<view>
			<image style="width: 80rpx; height: 80rpx; margin-left:20rpx ; border-radius: 50%;" src="../../../static/6.png"></image>
		</view>
		<view class="lp">
			<view class="pll">
				<view>
					<view class="zt1">平安379373</view>
					<view class="sj">
						<view class="sjs">3小时前</view>
						<view class="sjs">广西河池市</view>
					</view>
				</view>
				<view class="pl">
					<view class="plll">1</view>
					<view class="plll">
						<image style="width: 30rpx; height: 30rpx;" src="../../../static/zan.png"></image>
					</view>
					<view class="plll">
						<image style="width: 30rpx;height: 30rpx;" src="../../../static/cai.png"></image>
					</view>
				</view>
			</view>
			<view class="pll">真看不懂，理解不了。</view>
		</view>
	</view>
	<!--第五部分-热门推荐-4-->
	<view class="pl">
		<view>
			<image style="width: 80rpx; height: 80rpx; margin-left: 20rpx; border-radius: 50%;" src="../../../static/7.png"></image>
		</view>
		<view class="lp">
			<view class="pll">
				<view>
					<view class="zt1">郊友896903</view>
					<view class="sj">
						<view class="sjs">5小时前</view>
						<view class="sjs">广西柳州市</view>
					</view>
				</view>
				<view class="pl">
					<view class="plll">9</view>
					<view class="plll">
						<image style="width: 30rpx;height: 30rpx;" src="../../../static/zan.png"></image>
					</view>
					<view class="plll">
						<image style="width: 30rpx;height: 30rpx;" src="../../../static/cai.png"></image>
					</view>
				</view>
			</view>
			<view class="pll">不应该/应该如何面对。</view>
		</view>
	</view>
	<view class="xhx"></view>
	<view class="jz">已加载全部</view>
	<view class="xhzz"></view>
	<!--第六部分-底部-->
	<view class="zdb">
		<view>
			<image style="width: 40rpx; height: 40rpx;" src="../../../static/zuo1.png"></image>
		</view>
		<view class="left">
			<input type="text" style="width: 180rpx; margin-right: 20rpx; font-size: 25rpx;" placeholder="我来说两句"
			class="search_input"></input>
		</view>
		<view class="jl">
			<image style="width: 30rpx; height: 30rpx;" src="../../../static/xin2.png"></image>
		</view>
		<view class="jl">
			<image style="width: 40rpx; height: 40rpx;" src="../../../static/shou1.png"></image>
		</view>
		<view class="jl">
			<image style="width: 40rpx; height: 40rpx;" src="../../../static/fen1.png"></image>
			</view>
		</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.item {
	margin: 20rpx 20rpx 20rpx 20rpx;
}
.spsy {
	width: 100%;
	height: 400rpx;
}
.checkbox-item {
	position: fixed;
	top: 85rpx;
	z-index: 1;
	/*显示层级，设置在最上显示*/
}
.sp {
	margin: 20rpx;
	border-bottom: 1rpx solid #999999;
}
.b {
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	font-size: 45rpx;
}
.reg-rigth {
	background: #dd524d;
	height: 50rpx;
	border-radius: 50rpx;
	color: #ffffff;
	width: 140rpx;
	text-align: center;
}
.c {
	display: flex;
	flex-direction: row;
}
.d {
	display: flex;
	flex-direction: row;
	border-bottom: 1rpx solid #d0d0d0;
}
.z {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 30rpx;
}
.z-h {
	margin-right: 210rpx;
}
.z-z1 {
	font-size: 30rpx;
	color: #c8c7cc;
	margin: 20rpx;
}
.z-z2 {
	font-size: 30rpx;
	color: #c8c7cc;
	margin: 20rpx;
}
.z-z {
	font-size: 30rpx;
	color: #c8c7cc;
}
.e-item {
	display: flex;
	flex-direction: row;
}
.e-rigth {
	margin: 20rpx;
	margin-top: 40rpx;
}
.e {
	margin-top: 30rpx;
}
.pl {
	display: flex;
	flex-direction: ;
	margin-right: -280rpx;
	margin-bottom: 40rpx;
	margin-left: 50rpx;
}
.lp {
	margin-left: -30px;
}
.pll {
	display: flex;
	flex-direction: ;
	justify-content: space-between;
	-wekbet-justify-content:space-between;
	margin-left: 50rpx;
}
.plll {
	margin-right: 30rpx;
}
.xhx {
	border-bottom: 1rpx solid #c0c0c0 ;
	margin: 0rpx 20rpx 20rpx 100rpx;
}
.xhxx {
	border-bottom: 1rpx solid #c0c0c0;
	margin: 0rpx 20rpx 20rpx 10rpx;
	margin-bottom: 40rpx ;
}
.jz {
	color: #c0c0c0;
	margin-left: 120rpx;
	margin-bottom: 80rpx;
}
.zdb {
	display: flex;
	flex-direction: row;
	background-color: #ffffff;
	width: 100%;
	height: 60rpx;
	position: fixed;
	bottom: 0rpx;
}
.left {
	height: 10rpx;
	margin-left: 20rpx;
}
.search_input {
	background-color: #f8f8f8;
	border-radius: 40rpx;
	padding: 5rpx 30rpx 6rpx 30rpx;
	margin-right: 1rpx;
}
.j1 {
	margin-left: 80rpx;
}
.zt1 {
	font-size: 30rpx;
	color: #007aff;
	margin-top: 10rpx;
}
.zdb {
	display: flex;
	flex-direction: row;
	}
.left {
	height: 10rpx;
	margin-left: 20rpx;
}
.search_input {
	background-color: #f8f8f8;
	border-radius:40rpx;
	padding: 5rpx 30rpx 6rpx 30rpx;
	margin-right: 1rpx;
}
.jl {
	margin-left: 90rpx;
}
</style>
